<template>
  <view>
    <HeadNav
        v-if="showHead"
        :page-name="pageName"
        :showNav="showNav"
        :borderType="borderType"
        :navImgType="navImgType"
        :customBack="customBack"
        :custoNav="custoNav"
        :customBackBtn="customBackBtn"
        @back="goBack"
    >
      <template v-slot:headNav >
        <slot name="headNav"></slot>
      </template>
    </HeadNav>
    <view style="position: relative;" :style="{'height': bodyHeight,'backgroundColor': pageBgcolor}" class="safe-bottom">
      <slot></slot>
    </view>
    <Tabbar v-if="showTabbar" />
  </view>
</template>

<script>
import HeadNav from "@/components/headNav/index.vue";
import Tabbar from '@/components/tabbar/index.vue'

export default {
  props:{
    // 头部传参 start
    showHead: {type: Boolean, default: true}, // 是否显示头部
    custoNav: {type: Boolean, default: false}, // 是否自定义头部
    pageName: {type: String, default: ''}, // 头部标题
    customBack: {type: Function, default: null},// 自定义返回逻辑
    showNav: {type: Boolean, default: true}, // 是否显示返回按钮
    navImgType: {type: Number, default: 0}, // 返回按钮图片
    borderType: {type: Boolean, default: false},  // 是否带下边框
    bgColor: {type: Boolean, default: false}, // 页面类型默认都显示标题根据每个页面判断
    customBackBtn: {type: Boolean, default: false}, // 自定义头部时，是否显示返回按钮

    // 头部传参 end
    pageBgcolor: {type: String, default: '#F7F8FA'} // 背景颜色
  },
  components: {
    HeadNav,
    Tabbar
  },
  computed: {
    // 是否显示底部tabbar
    showTabbar(){
      let tabbarList = ['pages/index/index','pages/store/index','pages/stream/index','pages/my/index']
      const { route } = this.getRoute()
      if(tabbarList.includes(route)){
        return true
      }else{
        return false
      }
    },
    // 内容盒子总高度,已兼容iphoneX
    bodyHeight(){
      if(this.showHead && this.showTabbar){
        return `calc(100vh - ${this.$store.state.globalData.navHeight}px - 100rpx)`
      }else if(this.showHead && !this.showTabbar){
        return `calc(100vh - ${this.$store.state.globalData.navHeight}px)`
      }else if(!this.showHead && this.showTabbar){
        return `calc(100vh - 100rpx)`
      }else{
        return `100vh`
      }
    }
  },
  methods:{
    goBack(){ // 由于this指向问题，此方法起到中间执行方法
      this.customBack.bind(this.$u.$parent.call(this))();
    }
  }
}
</script>